<template>
  <el-row class="home">
    <el-col class="header" tag="header">
      <headers></headers>
    </el-col>
    <el-col :span="mindata" class="min_asides">
      <asides></asides>
    </el-col>
    <el-col :span="maxdata" tag="section" class="my_center">
      <transition name="fade" mode="out-in">
        <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </transition>
    </el-col>
  </el-row>
</template>
<script>
import headers from "@/components/headers.vue";
import asides from "@/components/aside.vue";
export default {
  name: "home",
  data() {
    return {
      mindata: 3,
      maxdata: 21
    };
  },
  components: {
    headers,
    asides
  },
  computed: {
    getmin() {
      return this.$store.state.iscoll;
    }
  },
  watch: {
    getmin: {
      handler(newVal) {
        if (newVal) {
          this.mindata = 1;
          this.maxdata = 23;
        } else {
          this.mindata = 3;
          this.maxdata = 21;
        }
      },
      deep: true
    }
  },
  mounted() {},
  methods: {}
};
</script>
<style lang="scss">
.home {
  height: 100%;
  background-color: #f8f8f8;
}
.header {
  height: 60px;
}
</style>